<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>预览</title>
<link href="css/player.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery.js"></script>

<body>
<div class="loading" style="display: block">
  <p></p>
</div>
<div class="iosPlay"></div>
<div id="main" class="main wrapper">
  <div id="support-info" class="support-info hide">
    <h2>温馨提示</h2>
    <p>暂不支持使用您当前的浏览器进行播放 :-( </p>
  </div>
  <div id="stage">
    <div id="stage-inner" class="inner">
      <div class="play"></div>
    </div>
    <div class="return">
      <div class="backFull">返回</div>
    </div>
    <div class="player">
      <div class="buttons">
         <ul class="play-pause">
          <li class="play"><i></i></li>
          <li class="pause"><i></i></li>
          <li class="warn"></li>
         </ul>
        <div class="time">
            <em class="played">0:00</em>
            <div class="scrubber" id="scrubber">
              <div style="width: 0%;" class="progress"></div>
              <div style="width: 100%;" class="loaded"></div>
              <div class="timeShow">
                <span>00:00</span>
                <i class="timeArrow"></i>
              </div>
              <div class="scrubber-track">
                <div style="left:0%;" class="scrubber-draggable progress-tracker" id="drag"></div>
              </div>
            </div>
          <strong class="duration">0:00</strong>
        </div>
        <div class="volume">
          <span class="volumeBtn"></span>
          <div class="volumeMain">
            <div class="volumeBar">
              <div class="volumeLine"></div>
              <div class="volumePoint"></div>
            </div>
          </div>
        </div>
        <ul class="fullscreen"><a href="javascript:;" class="fullscreenBtn"></a></ul>
      </div>
      <div class="player-bg"></div>
    </div>
  </div>
  <div class="audio">
    <audio id="audio1">您的浏览器不支持audio标签</audio>
  </div>
<span id="error" style="position:absolute;top:0;right:0;"></span>
<span id="error1"></span>
</div>
<script>

</script>
<script type="text/javascript" src="js/draw.js"></script>
<script>
   $(".fullscreenBtn,.backFull").on("click",function(){ //控制全屏
     var isFullscreen = document.fullscreenEnabled ||

       window.fullScreen ||

       document.webkitIsFullScreen ||

       document.msFullscreenEnabled;

         if(!isFullscreen){
           var docElm = document.documentElement;
           if (docElm.requestFullscreen) {
             docElm.requestFullscreen();
           }
           else if (docElm.msRequestFullscreen) {
             docElm = document.body; //overwrite the element (for IE)
             docElm.msRequestFullscreen();
           }
           else if (docElm.mozRequestFullScreen) {
             docElm.mozRequestFullScreen();
           }
           else if (docElm.webkitRequestFullScreen) {
             docElm.webkitRequestFullScreen();
           }
           $(".fullscreen").css({background:'url(images/returnFull.png) no-repeat center'})
           $(".return").show();
         }else{
           if (document.exitFullscreen) {
             document.exitFullscreen();
           }
           else if (document.msExitFullscreen) {
             document.msExitFullscreen();
           }
           else if (document.mozCancelFullScreen) {
             document.mozCancelFullScreen();
           }
           else if (document.webkitCancelFullScreen) {
             document.webkitCancelFullScreen();
           }
           $(".fullscreen").css({background:'url(images/full.png) no-repeat center'})
           $(".return").hide();
         }

     });



    var barHeight =  $(".volumeBar").height();
    var audio = $('#audio1');
    $(".volumeBar").on('mousedown',function(ev){
      var offsetTop = $(".player")[0].offsetTop;
      var offsetY = offsetTop - ev.clientY;
      var percent = Math.max(Math.min(parseInt(offsetY/barHeight*100),100),0);
      $(".volumeLine").css({'height':percent+'%'})
      audio.volume = percent/100;
    })

    $(".volumeLine").on('mousedown',function(ev){
      var offsetTop = $(".player")[0].offsetTop;
      document.onmousemove = function (ev) {
        var offsetY = offsetTop - ev.clientY;
        var percent = Math.max(Math.min(parseInt(offsetY/barHeight*100),100),0);
        $(".volumeLine").css({'height':percent+'%'})
        audio.volume = percent/100;
      }
      document.onmouseup = function(ev){
        document.onmousemove = null
        document.onmouseup = null
      }
    })

</script>
<script>
$(function(){
	canvasBegin();
})
$(window).resize(function(){
	pageLoad();
});
var audio = document.getElementById("audio1");


//开始播放方法
function pause() {
    clearTimeout(u);
    $(".play").hide();
    $(".pause").show();

    //重播时
    if (playNum == 2) {
      count = 0;
      zz = 0;
      clearCanvas();
      ex = 0;
    }
      YDrag();
      pauseNum = 1;
      playNum = 1;
     drawCircle();
     timeChange();
     audio.currentTime = ex;
     console.log('play')
     audio.play();
     $(".loading").hide();

}

//暂停播放方法
function play() {
  zz = ex*1000;
	$(".pause").hide();
  $(".play").show();
  clearTimeout(u);
  for (var i = 0; i < myAryR.length; i++) {
    clearTimeout(myAryR[i]);
  }
  pauseNum = 0;
  console.log('pause')
  audio.pause();
}
$(".play").click(function () {
    pause();
})
$(".pause").click(function () {
    play();
})

</script>
</body>
</html>
